<template>
    <!-- 顶部导航栏组件 -->
    <div class="navbar" :style="{'background-color':props.navBarBackground}">
      <div class="nav-left" @click="router_back_btn">
        <i class="left-icon"><SvgIcon name="arrow_left" :color="props.backIconColor" width="0.6em" height="0.6em" style="position:relative;top:-2px;" /></i>
        <span class="left-text text-color" :style="{'color':props.backTextColor}" v-if="props.isShowBackText">返回</span>
      </div>
      <div class="nav-title">{{ props.navbarTitle }}</div>
    </div>
</template>

<script setup lang='ts'>
import { useRouter } from "vue-router";
const router = useRouter();

interface Props {
  navbarTitle?:string,  //导航栏标题
  navBarBackground?:string,
  isShowBackText?:boolean,  //是否展示'返回'文本
  backTextColor?:string,  //返回文本文字颜色
  backIconColor?:string,  //返回图标颜色
}
//声明props
const props = withDefaults(defineProps<Props>(),{
  navbarTitle:"标题",
  navBarBackground:"#eff2f5",
  isShowBackText:true,
  backTextColor:"#1989fa",
  backIconColor:"#1989fa"
})

//返回按钮
const router_back_btn = () => {
  router.go(-1);
}

</script>

<style scoped lang="less">
.navbar{
    width: 375px;
    height:46px;
    position: fixed;
    top:0;
    display: flex;
    align-items: center;
    background-color: #eff2f5;

    .nav-left{
      position: absolute;
      width:80px;
      height: 46px;
      display: flex;
      align-items: center;
      justify-content: center;
      left:0;

      .left-text{
        font-size: 14px;
        &.text-color{
          color:#1989fa;
        }
      }
    }
    .nav-title{
      margin: 0 auto;
      font-size: 16px;
      font-weight: bold;
    }
}
</style>